#include("common.html")
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>支付</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="#(tpath)/static/css/element.css">
  <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/basic.css">
  <link rel="stylesheet" type="text/css" href="#(tpath)/static/css/filter.css">
  <script src="#(tpath)/static/js/jquery.js"></script>
  <script src="#(tpath)/static/js/common.js"></script>
</head>

<body class="" style="">
#include("header.html")
<style type="text/css">#message{ background: #f6f6f6; } .message-main{ padding-top: 20px; padding-bottom: 50px; } .cart-thead{ display: block; padding: 45px 0; background: #fff; border: 1px solid #e9e9e9; } .message-img{ margin-left: 50px; margin-right: 100px; float: left; } .message-hint{ font-size: 30px; color: #b82831; } .message-goods{ line-height: 30px; color: #6d6d6d; font-size: 14px; } .message-a{ line-height: 30px; font-size: 14px; } .message-a:hover{ color: #6d6d6d; } a{ outline: none; cursor: pointer; color: #428bca; } .allwarp .breadcrumbs { clear: both; height: 44px; line-height: 44px; color: #999; width: 1200px; margin: 0 auto; } .allwarp .clearfix { zoom: 1; } .allwarp .breadcrumbs li { float: left; font-size: 12px; } .allwarp .breadcrumbs a, .breadcrumbs a:visited { color: #737574; } .sucess_pay { width: 1200px; height: 200px; border: 1px #dfdfdf solid; background: #fff; } .sucess_pay .sucess_payfl { width: 240px; height: 200px; background: #fafafa; } .fl { float: left; } .sucess_pay .sucess_payfl img { margin: 50px 66px 50px 68px; } .sucess_pay .sucess_payfr { height: 200px; padding-left: 20px; background: #fff; } .sucess_pay .sucess_payfr .sucess_information1 { color: #010000; font-size: 22px; margin-top: 30px; } .sucess_pay .sucess_payfr .sucess_information2 { color: #343233; font-size: 16px; } .sucess_pay .sucess_payfr .sucess_information3 { color: #6c6e6d; font-size: 14px; line-height: 22px; } .sucess_information4{ color: #ee3333; font-size: 18px; line-height: 22px; } .btn_b { margin: 10px 0 10px; padding: 8px 30px; font-size: 14px; background: #ee3333; color: #fff !important; cursor: pointer; text-align: center; border-radius: 2px; } input, select { vertical-align: middle; } .pay_code .el-dialog--center .el-dialog__body{ text-align: center; padding: 0px 15px 20px; }</style>
<style type="text/css">
  .step {
    width:100%;
    position:relative;
    margin-bottom:10px;
  }
  .step1 {
    width:50%;
    position:relative;
    margin-bottom:10px;
    float:left;
  }
  .stephead {
    width:100%;
    height:40px;
    line-height:40px;
    position:relative;
    border-bottom:1px solid #f5f5f5;
  }
  .stephead h1 {
    font-size:15px;
    color:#333333;
    font-weight:bold;
    width:60%;
    float:left;
  }
  .stephead a {
    float:right;
    font-size:14px;
    margin-right:10%;
  }
  .stepbody {
    padding-top:10px;
    /* padding:10px 0px;
    */
  }
  .checkout-option-list li.active {
    border:1px solid #f15151;
  }
  .checkout-option-list li {
    float:left;
    min-width:160px;
    border:1px solid #dddddd;
    margin-right:10px;
    background:#fff;
    cursor:pointer;
    white-space:nowrap;
    text-align:center;
    font-size:12px;
    color:#666666;
    margin-bottom:10px;
    position:relative;
    height:48px;
    line-height:48px;
    padding:0 25px;
  }
  .checkout-option-list li img {
    width:20px;
    height:20px;
    border-radius:20px;
    margin-right:10px;
  }
  .checkout-option-list li input {
    display:none;
  }
  input {
    width:180px;
  }
  input,select {
    vertical-align:middle;
  }
  .checkout-option-list li input {
    display:none;
  }
</style>
<div id="message">
  <div class="message-pay">
    <div class="allwarp">
      <div class="breadcrumbs">
        <ul class="clearfix">
          <li class="home">
            <a href="" title="首页">首页</a>
            <span>&nbsp;&nbsp;&gt;&nbsp;&nbsp;</span></li>
          <li class="home">
            <a href="#" title="订单中心">订单中心</a>
            <span>&nbsp;&nbsp;&gt;&nbsp;&nbsp;</span></li>
        </ul>
      </div>
    </div>
    <div class="allwarp">
      <input type="hidden" id="orderSn" value="#(order.sn)"/>
      <input type="hidden" id="orderId" value="#(order.id)"/>
      <input type="hidden" id="orderAmount" value="#(order.amount)"/>
      <div class="sucess_pay">
        <div class="sucess_payfr fl">
          <p class="sucess_information3" style="margin-top: 20px;">订单：#(order.sn)</p>
          <p class="sucess_information3" style="margin-top: 5px;">订单总金额：￥#(order.amount)</p>
          <p class="sucess_information4" style="margin-top: 5px;">应付金额：￥#(order.amount)</p></div>
      </div>
      <div class="step">
        <div class="stephead">
          <h1>支付方式</h1></div>
        <div class="stepbody">
          <ul id="payment" class="checkout-option-list">
            <li class="active" paymentMethod="WEIXINPAY_NATIVE">
              <!---->微信支付</li>
            <li class="" paymentMethod="ALIPAY_WEB">
              <!---->支付宝支付</li>
            <li class="" paymentMethod="BALANCE" amount="#(member.amount)">
              <!---->余额支付(账户当前余额:#(member.amount))</li>
            <div class="cl"></div>
          </ul>
        </div>
      </div>
      <div class="foot_give">
        <div class="fr" style="margin-right: 20px;">
          <input type="button" value="确认进行支付 >" class="btn_b pidout" style="margin-top: 20px; border: 0px;" id="payBtn"></div>
        <div class="cl"></div>
      </div>
    </div>
    <br>
    <br></div>
</div>
#include("footer.html")
</body>

</html>
<script type="text/javascript">

  $("#payment li").on("click",function(){
    $("#payment li.active").removeClass("active");
    $(this).addClass("active");

  });

  $("#payBtn").on("click",function(){
    var currentLi = $("#payment li.active");
    var paymentMethod = currentLi.attr("paymentMethod");
    if(paymentMethod=="BALANCE"){
      var amount = currentLi.attr("amount");
      var orderAmount = $("#orderAmount").attr("amount");
      if(parseFloat(orderAmount)>parseFloat(amount)){
        alert("账户余额不足");
        return;
      }
    }
    var orderSn = $("#orderSn").val();
    var paymentType = "ORDER";
    location.href="#(base)/payment/pay?paymentMethod="+paymentMethod+"&sn="+orderSn+"&paymentType="+paymentType;
  });

</script>